<template>
    <view class="cus-page">
        <view class="com-p-b-32 title">
            <text class="com-font-32 com-font-bold">支付方式</text>
        </view>
        <u-radio-group
            v-model="value"
            placement="column"
            @change="groupChange">
            <view v-for="(item, index) in list" :key="index" class="com-m-t-36 com-flex com-row-between">
                <view class="com-flex">
                    <image :src="item.icon" alt=""></image>
                    <text>{{item.name}}</text>
                </view>
                <u-radio
                    :name="item.name"
                    size="40rpx" 
                    iconSize="30rpx">
                </u-radio>
            </view>
        </u-radio-group>
    </view>
</template>


<script>
export default {
    name:'payWay',
    props:{},
    components: {},

    data () {
        return {
            // 基本案列数据
            list: [
                { icon: '/static/common/weixin.png', name: '微信支付', disabled: false },
                { icon: '/static/common/zfb.png', name: '支付宝支付', disabled: false },
                { icon: '/static/common/hbfq.png', name: '花呗分期', disabled: false },
                { icon: '/static/common/xyk.png', name: '信用卡支付', disabled: false },
            ],
            value: '微信支付',
        }
    },

    computed: {},
    watch: {},

    mounted() {},

    methods: {
        // 选择
        groupChange(e){
            this.$emit("select",{value: e})
        }
    },
}
</script>


<style scoped lang='scss'>
    .cus-page{
        background: #fff;
        border-radius: 24rpx;
        padding: 32rpx;
        .title{
            border-bottom: 1px solid #F8F8F8;
        }
        image{
            width: 56rpx;
            height: 56rpx;
            margin-right: 26rpx;
            border-radius: 4rpx;
        }
    }
</style>